<template>
  <div v-loading.fullscreen.lock="loading">
    <div class="type">
      <div
        v-for="(item, index) in optionGalleryData"
        :key="index"
        class="for-type"
        :class="isTypeBak==item.id?'type-hover':''"
        @click="onType(item.id)"
      >{{item.type_name}}</div>
    </div>
    <div>
      <botanyGallery :galleryData="galleryData"></botanyGallery>
    </div>
    <div class="pag">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryParams.size"
        :current-page="queryParams.current"
        background
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// 女性服装
import { galleryList, optionGalleryList } from "@/api/home/api";
import botanyGallery from "../../../components/botanyGallery";
export default {
  components: {
    botanyGallery
  },
  data() {
    return {
      loading: false,
      queryParams: {
        size: 12,
        current: 1
      },
      total: 0,
      isTypeBak: "",
      optionGalleryData: [],
      galleryData: []
    };
  },
  watch: {
    $route(){
      this.getList()
    }
  },
  created() {
    this.optionGalleryList();
    this.getList();
  },
  methods: {
    optionGalleryList() {
      optionGalleryList().then(res => {
        let data = res.data;
        this.optionGalleryData = data.dataList;
      });
    },
    getList() {
      this.loading = true;
      let query = {
        address: "",
        current: this.queryParams.current,
        name: this.$route.query.searchData,
        size: this.queryParams.size,
        type_id: this.isTypeBak
      };
      galleryList(query).then(res => {
        let data = res.data;
        this.total = data.total;
        data.dataList.forEach((item, index, arr) => {
          arr[index].img_list = JSON.parse(arr[index].img_list);
        });
        this.galleryData = data.dataList;
        this.loading = false;
      });
    },
    onType(i) {
      this.isTypeBak = i;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    }
  }
};
</script>

<style scoped>
.type {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
.for-type {
  width: 96px;
  height: 34px;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  color: #0dbd95;
  border: 1px solid #0dbd95;
  border-radius: 5px;
  margin-right: 20px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}
.type-hover {
  background: #0dbd95;
  color: #fff;
}
.pag {
  display: flex;
  justify-content: center;
}
.pag >>> .el-pager li {
  padding: 0 4px;
  font-size: 14px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  border-radius: 4px;
}
.pag >>> .el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 14px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  vertical-align: top;
  box-sizing: border-box;
  border-radius: 4px;
}
.pag >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0dbd95;
  color: #fff;
}
.pag >>> .is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.pag >>> .is-background .el-pager li:hover {
  color: #0dbd95;
}
.pag >>> .is-background .el-pager li:not(.disabled):hover {
  color: #0dbd95;
}
.pag >>> .is-background .el-pager li:not(.disabled).active:hover {
  background-color: #0dbd95;
  color: #fff;
}
</style>